<template>
<div id="app">
    <!-- 查询区域 -->
    <el-row class="m20">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="当前状态">
                <el-select v-model.number="formInline.status" placeholder="状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="formInline.companyName" placeholder="企业名称"></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
                <el-input v-model="formInline.brandName" placeholder="品牌名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery">查询</el-button>
                <el-button type="primary" @click="onReset">重置</el-button>
                <el-button type="primary" @click="getToken">获取token</el-button>
            </el-form-item>
        </el-form>
    </el-row>

    <!-- 按钮列 -->
    <el-row class="m20">
        <el-button type="danger" @click="handleBatchDelete" plain>批量删除</el-button>
        <el-button type="primary" @click="dialogFormVisible=true" plain>新增</el-button>
    </el-row>

    <!-- 新增输入框 -->

    <el-dialog title="新增品牌" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="form.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="form.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model.number="form.ordered"></el-input>
            </el-form-item>
            <el-form-item label="公司描述">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="insertRec">提交</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 数据表格 -->
    <el-row class="m20">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="80">
            </el-table-column>
            <el-table-column prop="brandName" label="品牌名称" width="180">
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" width="220">
            </el-table-column>
            <el-table-column prop="ordered" label="排序" width="80">
            </el-table-column>
            <el-table-column prop="status" label="当前状态" width="100">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-row>
    <!-- 分页 -->
    <el-row class="m20">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="arrPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </el-row>

</div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            dialogFormVisible: false,
            form: {
                status: 1
            },
            formLabelWidth: '120px',
            currentPage: 1,
            pageSize: 10,
            arrPage: [10, 20, 50, 100],
            total: 50,
            formInline: {}
        }
    },
    mounted: function () {
        // this.queryAll()
        this.queryPage()
    },

    methods: {
        getToken: async function () {
            let result = await this.$http.get("/token")
            console.log(result);
            if (result.status == 200) {
                localStorage.setItem("token", result.data)
                this.$message({
                    type: 'success',
                    message: result.message
                });
            } else {
                this.$message({
                    type: 'error',
                    message: result.message
                });
            }
        },
        onReset: function () {
            this.formInline = {}
            this.onQuery()
        },
        onQuery: async function () {
            console.log(this.formInline);
            // post 请求， 可以带 请求体 和 url的参数
            let params = "/current/" + this.currentPage + "/size/" + this.pageSize
            let result = await this.$http.post("/brands" + params, this.formInline)
            console.log(result);
            if (result.status == 200) {
                this.tableData = result.data.list
                this.total = result.data.total
            } else {
                this.$message({
                    type: 'error',
                    message: result.message
                });
            }
            // this.formInline = {}
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.currentPage = 1
            // this.queryPage()
            this.onQuery()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            // this.queryPage()
            this.onQuery()
        },
        queryPage: async function () {
            // get, rest? /brands/current/1/size/10
            let result = await this.$http.get("brands/current/" + this.currentPage +
                "/size/" + this.pageSize)
            console.log(result);
            this.tableData = result.data.list
            this.total = result.data.total

        },
        queryAll: async function () {
            let result = await this.$http.get("brands")
            console.log(result);
            if (result.status == 200) {
                this.tableData = result.data
            }
        },
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex % 2 == 1) {
                return 'success-row';
            }
            return '';
        },
        handleEdit(index, row) {
            console.log(index, row);
            console.log("update id " + row.id);
            // 调用 axios 方法
        },
        async handleDelete(index, row) {
            console.log(index, row);
            console.log("delete id " + row.id);
            let result = await this.$http.delete("/brand/" + row.id)
            if (result.status == 200) {
                this.$message({
                    type: 'success',
                    message: result.message
                });
                // this.queryAll()
                this.queryPage()

            } else {
                console.log("删除失败")
                console.log(result)
                this.$message.error("删除失败")
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection)
        },
        handleBatchDelete: async function () {
            this.$confirm('此操作将永久删除选择的记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let idList = this.multipleSelection.map(brand => brand.id)
                console.log(idList)
                //  delete  /brands/8,9,100
                let result = await this.$http.delete("/brands/" + idList.join(","))

                if (result.status === 200) {
                    console.log("删除成功")
                    this.$message({
                        type: 'success',
                        message: result.message
                    });
                    this.queryPage()
                } else {
                    console.log("删除失败")
                    console.log(result)
                    this.$message({
                        type: 'error',
                        message: result.message
                    });
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        insertRec: async function () {
            console.log(this.form);
            let result = await this.$http.post("insert", this.form)
            if (result.status === 200) {
                console.log("插入成功")
                this.$message({
                    type: 'success',
                    message: result.message
                });
                this.dialogFormVisible = false
                this.queryPage()
            } else {
                console.log("插入 failed")
                this.$message({
                    type: 'warning',
                    message: result.message
                });
            }
        }
    }
}
</script>

<style scoped>
.m20 {
    margin-bottom: 10px;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.el-dialog {
    width: 500px;
}
</style>
